<template>
  <Modal v-model="modalValue" :title="userId ? '编辑账号' : '添加账号'">
  <div class="add-partner">
    <Form ref="addForm" :model="form" :rules="diyData.rules" :label-width="150">
      <FormItem label="登录账号" prop="username">
        <Input clearable
          v-model="form.username"
          maxlength="20"
          placeholder="请输入字母、数字"
        ></Input>
      </FormItem>
      <FormItem label="昵称" prop="nickname">
        <Input clearable
          v-model="form.nickname"
          placeholder="请输入昵称"
        ></Input>
      </FormItem>
       <FormItem label="邮箱" prop="email">
        <Input clearable
          v-model="form.email"
          placeholder="请输入邮箱"
        ></Input>
      </FormItem>
      <FormItem label="联系电话" prop="mobile">
        <Input clearable
          v-model="form.mobile"
          :maxlength="11"
          placeholder="请输入联系人"
        ></Input>
      </FormItem>
      <FormItem v-if="!userId" label="登录密码" prop="password">
        <Input clearable
          v-model="form.password"
          type="password"
          placeholder="登录密码"
        ></Input>
      </FormItem>
      <FormItem label="状态" prop="status">
         <RadioGroup v-model="form.status">
            <Radio label="1">
                启用
            </Radio>
             <Radio label="0">
                禁用
            </Radio>
         </RadioGroup>
      </FormItem>
      <FormItem label="角色" prop="roleIdList">
         <CheckboxGroup  v-model="form.roleIdList">
           <Checkbox :label="item.roleId" v-for="(item,index) in apiData.role" :key="index">
                <span>{{item.roleName}}</span>
            </Checkbox>
         </CheckboxGroup >
      </FormItem>
    </Form>
    </div>
    <div slot="footer">
      <Button style="width: 90px" @click="modalCancel()">返回</Button>
      <Button type="primary" style="width: 90px; margin-left: 20px" @click="submit" >保存</Button>
    </div>

  </Modal>
</template>

<script>
import {
  userSave, userUpdate, userInfo
} from '@/api/system/account-manage.js'
import {
  roleList
} from '@/api/system/role-permissions.js'
export default {
  name: '',
  props: {
    value: {
      type: Boolean,
      default: false
    },
    userId: {
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      query: {},
      search: {},
      diyDom: {},
      // 表单数据
      form: {
        nickname: '',
        username: '',
        mobile: '',
        password: '',
        email: '',
        status: '',
        roleIdList: []
      },
      diyData: {
        rules: {
          nickname: [
            {
              required: true,
              message: '用户名不能为空',
              trigger: 'blur'
            }
          ],
          username: [
            {
              required: true,
              message: '姓名不能为空',
              trigger: 'blur'
            }
          ],
          mobile: [
            {
              required: true,
              message: '手机号不能为空',
              trigger: 'blur'
            }
          ],
          email: [
            {
              required: true,
              message: '邮箱不能为空',
              trigger: 'blur'
            }
          ],
          password: [
            {
              required: true,
              message: '密码不能为空',
              trigger: 'blur'
            }
          ],
          status: [
            {
              required: true,
              message: '用户状态不能为空',
              trigger: 'change'
            }
          ],
          roleIdList: [
            {
              type: 'array',
              required: true,
              message: '角色不能为空',
              trigger: 'blur'
            }
          ]
        }
      },
      apiData: {
        role: []
      }
    }
  },
  methods: {
    // 获取详情
    getDetail () {
      this.$store.commit('setSpinShow', true)
      userInfo({ userId: this.userId })
        .then((res) => {
          const {
            nickname,
            username,
            mobile,
            password,
            status,
            roleIdList,
            email
          } = res.data.user
          this.form.nickname = nickname
          this.form.username = username
          this.form.mobile = mobile
          this.form.email = email
          this.form.password = password
          this.form.status = status + ''
          this.form.roleIdList = roleIdList
        })
        .finally(() => this.$store.commit('setSpinShow', false))
    },

    submit () {
      this.$refs['addForm'].validate((valid) => {
        if (valid) {
          const opt = { ...this.form }
          if (this.userId) {
            opt.userId = this.userId
            userUpdate(opt).then((res) => {
              this.$Message.success('编辑成功')
              this.$emit('on-success')
              this.modalCancel()
            })
          } else {
            userSave(opt).then((res) => {
              this.$Message.success('新增成功')
              this.$emit('on-success')
              this.modalCancel()
            })
          }
        }
      })
    },
    getrole () {
      var opt = {
        pageNo: 1,
        pageSize: 100
      }
      roleList(opt).then(res => {
        this.apiData.role = res.data.page.list
      })
    },
    modalCancel () {
      this.$refs['addForm'].resetFields()
      this.$nextTick(() => {
        this.modalValue = false
      })
    }
  },
  computed: {
    modalValue: {
      get () {
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    }
  },
  watch: {
    value (val) {
      this.$refs['addForm'].resetFields()
      this.getrole()
      if (this.userId) {
        this.getDetail()
      }
    }
  },
  mounted () {

  }
}
</script>

<style scoped lang="less">
.add-partner {
  // border: 1px solid #ededed;
  // margin: 0 20px;
  // padding: 26px 20px;
  padding-right: 40px;
  .title {
    font-size: 14px;
    font-weight: bold;
    color: #333333;
    line-height: 19px;
    margin-bottom: 10px;
  }
}
</style>
